var TOTAL_ROW = CMS.globalGridConfig.totalRow;
var START = 0;
 // create the data store
var scriptProxy = new Ext.data.ScriptTagProxy({
        url: requestUrl
});

scriptProxy.addListener('beforeload', function(scriptProxy,params){
    START = params.start;
});

function renderCommandUpdate(value){
    var updateStr = "<a href=\"javascript:void(0)\">Edit</a>";
    return updateStr;
}

var store = new Ext.data.JsonStore({
    autoDestroy: true,
    start : 'start',
    totalProperty: 'totalCount',
    proxy: scriptProxy,
    root: 'rows',
    idProperty: 'id',
    remoteSort:true, // To remember do it on friday set to true.
    fields: [
        {name: 'id', mapping: 'id',type: 'number'},
        {name: 'title', mapping: 'title',type:'string'},
        {name: 'link_title', mapping: 'link_title',type:'string'},
        {name: 'page_heading', mapping: 'page_heading',type: 'string'},
        {name: 'url', mapping: 'url',type:'string'},
        {name: 'description', mapping: 'description',type: 'string'},        
        {name: 'template', mapping: 'template',type:'string'},
        {name: 'language', mapping: 'language',type: 'string'},
        {name: 'home', mapping: 'home',type:'bool'},
        {name: 'status', mapping: 'status',type:'bool'}        
    ]
});

var filters = new Ext.ux.grid.GridFilters({
    encode: false,
    local: false,
    filters: [
            {type: 'numeric' ,dataIndex: 'id'},
            {type: 'string'  ,dataIndex: 'title'},
            {type: 'string'  ,dataIndex: 'link_title'},
            {type: 'string'  ,dataIndex: 'template'},
            {type: 'list'  ,dataIndex: 'language',options: ['en','vi','zh'],phpMode:true},
            {type: 'string'  ,dataIndex: 'url'},
            {type: 'string'    ,dataIndex: 'status'}
    ]
});

var cm = new Ext.grid.ColumnModel({
    defaults: {
        sortable: true
    },
    columns: [
     {header: 'ID',dataIndex: 'id',width:30,resizable:false,css:'text-align:left'},
     {header: 'Title',dataIndex: 'title'},
     {header: 'Link Title',dataIndex: 'link_title'},
     {header: 'Page Heading',dataIndex: 'page_heading'},
     {header: 'Friend Url',dataIndex: 'url'},
     {header: 'Description',dataIndex: 'description'},     
     {header: 'Templage',dataIndex: 'template'},
     {header: 'Language',dataIndex: 'language',renderer:language_render},
     {header: 'Is Home Page',dataIndex: 'home'},
     {header: 'Status',dataIndex: 'status'}
  ]
});
 var topToolbar = new Ext.Toolbar({
    items: [
        new Ext.form.ComboBox({
             triggerAction: 'all',
             lazyRender:false,
             width:40,
             mode: 'local',
             emptyText:'25',
             store: new Ext.data.ArrayStore({
                fields: [
                          'id',
                          'value'
                         ],
                data: [[10,'10'],[25,'25'],[50,'50'],[100,'100']]
             }),
             valueField: 'id',
             displayField: 'value',
             listeners:{
                  'select': function(combo,record ,index){
                        TOTAL_ROW = combo.getValue();
                        store.reload({params:{start:0, limit:TOTAL_ROW}});
                        pagingBar.pageSize = TOTAL_ROW;
                        pagingBar.render()
                  }
             }
        })
    ]
});
topToolbar.addItem(['-',{
    text: 'Add',
    iconCls: 'silk-add',
    handler: function(){
    }
},'-',{
    text: 'Delete',
    iconCls: 'silk-delete',
    handler: function(){
    }
}
]);
var pagingBar = new Ext.PagingToolbar({
    pageSize: TOTAL_ROW,
    store: store,
    displayInfo: true,
    displayMsg: 'Displaying item {0} - {1} of {2}',
    emptyMsg: "No item to display",
    plugins: new Ext.ux.ProgressBarPager()
});
var grid;
var panel;
Ext.onReady(function(){    
    Ext.QuickTips.init();  
    grid = new Ext.grid.GridPanel({
        height: eval(Ext.getBody().getViewSize().height - CMS.globalGridConfig.gridHeight),                
    	store: store,
    	colModel:cm,    	
    	plugins: [filters],    	    	
    	bbar: pagingBar,
    	tbar: topToolbar,
        frame:true,
        loadMask: true,        
        viewConfig: {
            forceFit: true
        }
    });    
    store.load({params:{start:0, limit:TOTAL_ROW}});    
    panel = new Ext.Panel({      
        width: 'auto',
        renderTo:'page_main_content',
        items: grid,
        border:false        
    });    
});

Ext.EventManager.onWindowResize(function(width,height){  
    grid.setHeight(eval(height - CMS.globalGridConfig.gridHeight))
    console.log(CMS.WEB_LANG);
});

//-------------------Render
function language_render(value){
    return eval('CMS.WEB_LANG.'+value);
}